<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/collect.css">
  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/collect.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>我的收藏</title>
<body>
<!-- 导航 -->
<nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
  <h1 class="title">
    <a class="navbar-brand" href="#">
      <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
    </a>
  </h1>
  <!-- 折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto" id="ulInfo">
      <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
      <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->

      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoUpload.html">上传视频</a>
      </li>
      <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                          href="videoManager.html">视频管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
      </li>
      <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a></li>
      <!--下拉-->
      <li class="dropdown" style="margin-right: 450px">
        <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
        <ul class="dropdown-menu" style="text-align: center;">
          <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
          <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
          <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
          <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
        </ul>
      </li>

      <template v-if="currentUser.account == null">
        <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
      </template>
      <template v-if="currentUser.account != null">
        <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
        <li class="nav-item"><a class="nav-link" href="#">|</a></li>
        <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
      </template>
    </ul>
    <form id="formSearch" action="" class="form-inline ml-auto">
      <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
             @change="searchVideo">
      <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
    </form>
  </div>
</nav>

<!-- 风格展示区 -->
<div class="trend-style bg-light" id="itemInfo">
  <!--主体开始-->
  <div class="box" id="collectInfo">
    <div class="box_con">
      <!-- 主体内容 -->
      <div class="main comWidth clearfix">
        <!-- 展示区 -->
        <div class="showBar fl">
          <h3 style="text-align: center;margin-top: 30px">我的收藏</h3>
          <div class="clearfix">
            <div class="handleBar fr" style="margin-right:10px;">
              <div class="searchJSBox curSea fl">
                <i class="icon-search"></i>
                <!--失焦去查询-->
                <input type="text" placeholder="请输入关键词">
              </div>
            </div>
          </div>

          <!--清除浮动-->
          <div class="clearfix"></div>
          <ul class="groupWork">
            <li class="clearfix" v-for="item in collectList">
              <div class="personFace fl">
                <a :href="'../showVideoDetail?vid='+item.vid"><img
                        :src="'../upload/'+item.video.coverUrl" width="120px" height="80px"></a>
              </div>
              <div class="personWords fr">
                <a :href="'../showVideoDetail?vid='+item.vid"><p>&nbsp;{{item.video.type |
                  formatType}}《{{item.video.videoName}}》</p></a>
                <span class="newTips">视频简介：{{item.video.videoDetail.videoDetail}}</span><span
                      class="releaseDate fr">{{item.collectTime}}</span>
              </div>
            </li>
          </ul>
        </div>

        <!-- 侧边栏 -->
        <div class="fr">
          <div class="sideBar">
            <h3 class="relation">热门视频推荐<span class="icon-relation fr"></span></h3>
            <ul class="resoureList">
              <li v-for="item in browseCountList">
                <a :href="'../showVideoDetail?vid='+item.vid" class="icon-file text_overflow"
                   v-text="item.videoName">视频名称</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- footer部分 -->
<footer class="bg-white navbar-light p-4  text-center">
  <div class="container">
    <h3>合作伙伴</h3>
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
  </div>
</footer>
</body>
<script type="text/javascript">
  let message = null;
  /*导航条用户信息*/
  new Vue({
    el: "#ulInfo",
    data() {
      return {currentUser: "",keyword: "",}
    },
    methods: {
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
    },
    mounted() {
      message = this.$message;
      axios
        .post('../getCurrentUser')
        .then(result => {
          this.currentUser = result.data;
        })
        .catch(function (error) {
          message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
        });
    }
  });

  /*收藏信息*/
  new Vue({
    el: "#collectInfo",
    data: {
      collectList: "",
      browseCountList: "",
    },
    methods: {
      getCollectList: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios
          .get('../getCollectList')
          .then(result => {
            loading.close();
            this.collectList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          });
      },
      getVideoBrowseByTop: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios.get("../getVideoByTop?column=browseCount")
          .then(result => {
            loading.close();
            this.browseCountList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
    },
    mounted() {
      this.getCollectList();
      this.getVideoBrowseByTop();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
      formatType(typeId) {
        if (typeId === 1) {
          return "JavaSE";
        } else if (typeId === 2) {
          return "Web";
        } else if (typeId === 3) {
          return "MySQL";
        } else if (typeId === 4) {
          return "JavaWeb";
        }
        return "未知"
      },
    },
  });
</script>
</html>
